<template>
  <div>
    <Title title="近三年来毕业人员去向"></Title>
    <div class="top_item">
      <p class="bj">北京</p>
      <div class="top_item1">
        <div>
          <div>6000</div>
          <img src="/src/assets/images/ren.png" alt="" />
          <div>2022</div>
        </div>
        <div>
          <div>6000</div>
          <img src="/src/assets/images/ren2.png" alt="" />
          <div>2022</div>
        </div>
        <div>
          <div>6000</div>
          <img src="/src/assets/images/ren3.png" alt="" />
          <div>2022</div>
        </div>
      </div>
      <div class="tu">
        <MyEearts :option="option"></MyEearts>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, shallowRef,defineComponent } from 'vue'
import * as echarts from 'echarts'
import { getcity } from '../../request/index'
import Title from '../../components/commont/Title.vue'
import MyEearts from '../commont/MyEearts.vue'
let option = ref({
  legend: {
    show: false,
    textStyle: {
      color: '#fff',
      fontSize: ''
    }
  },
  //提示框
  tooltip: {
    trigger: 'axis',
    showDelay: 0,
    extraCssText: 'padding:15px;font-size:10px',
    // formatter: function (params) {
    //     return params[0].name + '人员总数' + ' : ' + params[0].value + ' 人' + '<br/>' + params[1].name + '工资发放金额' + ' : ' + '¥ ' + params[1].value;
    // },
    axisPointer: {
      show: true,
      type: 'shadow'
    }
  },
  grid: {
    left: '4%',
    right: '10%',
    top: '3%',
    bottom: '13%',
    containLabel: true
  },
  yAxis: [
    {
      type: 'category',
      data: ['湖北', '江苏', '浙江', '广西', '广东', '重庆', '天津', '上海'],
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      }
    }
  ],
  xAxis: [
    {
      type: 'value',
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: false // 隐藏 y 轴上的网格线
      },
      splitArea: {
        show: false // 隐藏 y 轴上的背景区域
      }
    },
    {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false // 隐藏 y 轴上的网格线
      },
      splitArea: {
        show: false // 隐藏 y 轴上的背景区域
      }
    }
  ],
  series: [
    {
      name: '配属',
      type: 'bar',
      // color: '#a3a7f4',
      xAxisIndex: 0,
      barWidth: 3,
      itemStyle: {
        emphasis: {
          barBorderRadius: 4
        },
        normal: {
          barBorderRadius: 4,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: '#4a1c90' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#f40380' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 45, 45, 0]
        }
      },
      data: [409, 887, 948, 611, 327, 355, 560, 498, 569]
    },
    {
      name: '运用',
      type: 'bar',
      // color: '#a476f5',
      xAxisIndex: 1,
      barWidth: 3,
      itemStyle: {
        emphasis: {
          barBorderRadius: 4
        },
        normal: {
          barBorderRadius: 4,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: '#00a6fb' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#00c8d7' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 45, 45, 0]
        }
      },
      data: [844, 780, 284, 65, 51, 659, 50, 183, 542]
    },
    {
      name: '厂段修',
      type: 'bar',
      // color: '#f00',
      xAxisIndex: 1,
      barWidth: 3,
      itemStyle: {
        emphasis: {
          barBorderRadius: 4
        },
        normal: {
          barBorderRadius: 4,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: '#84774f' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#dfb015' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 45, 45, 0]
        }
      },
      data: [44, 78, 28, 16, 15, 65, 10, 13, 52]
    }
  ]
})
onMounted(() => {
  getcity().then((res) => {
    // console.log(res, '3年')
    // option.yAxis.data=[...new Set(res.data.data.result.map((item)=>item.workCity))]
    let year = [...new Set(res.data.data.result.map((item) => item.gradYear))]
    // console.log(123, year)
    let seriesData = year.map((item, index) => {
      return {
        name: item,
        type: 'bar',
        data: res.data.data.result.filter((obj) => obj.gradYear === item).map((obj) => obj.total),
        itemStyle: {
          emphasis: {
            borderRadius: [20, 20, 20, 20]
          },
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                { offset: 0, color: index % 2 === 0 ? '#A520FF' : '#00CCD2' }, // Alternating colors for demonstration
                { offset: 1, color: index % 2 === 0 ? '#FF007A' : '#00CCD2' }
              ],
              false
            ),
            borderRadius: [20, 20, 20, 20]
          }
        },
        barWidth: '20%' // 宽度可以是百分比或像素值
      }
    })
    // console.log(seriesData)
    option.value.series[0] = seriesData[0]
  })
})
</script>

<style scoped lang="scss">
.top_item {
  font-size: 16px;
  margin-top: 10px;
  width: 100%;
  height: 410px;
  background: #0c1d5f;
}
.bj {
  margin: 10px;
  width: 100%;
  font-size: 16px;
  height: 20px;
  color: #fff;
  display: inline-block;
}
.top_item1 {
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  height: 60px;
  justify-content: space-around;
  img {
    width: 20px;
    height: 20px;
  }
}
.top_item1 > div:nth-child(1) {
  text-align: center;
  color: #dd0ab4;
}
.top_item1 > div:nth-child(2) {
  text-align: center;
  color: #06b4d5;
}
.top_item1 > div:nth-child(3) {
  text-align: center;
  color: #e8b50f;
}
.tu {
  width: 100%;
  height: 300px;
}
</style>